<template>
	<div class="vbox">
		<!-- <image class="top_back_img" src="../../static/set-top-bg.png" mode="aspectFit"></image> -->
		<view class="top">
			<view class="circle">
				<image
					class="head"
					src="../../static/cust.png"
					mode="widthFix"></image>
			</view>
			<view class="top-texts">
				<text class="name">{{ userInfo.username }}</text>
				<image
					class="set-top-hr"
					src="../../static/set-top-hr.png"
					mode=""></image>
				<text class="depart">企业用户</text>
				<!-- 	<view>
					<text>绑定手机：</text>
					<text>18888888888</text>
				</view> -->
			</view>
		</view>

		<!-- 下半部分 -->
		<view class="index">
			<view class="cell" @click="changePsd">
				<view class="cell-left">
					<image
						class="cell_icon"
						src="../../static/account.png"></image>
					<text class="cell-text">修改密码</text>
				</view>
				<view class="cell-right">
					<image
						class="right-arrow"
						src="../../static/right-arrow.png"></image>
				</view>
			</view>

			<view class="cell" @click="changeGray">
				<view class="cell-left">
					<image
						class="cell_icon"
						src="../../static/loan.png"></image>
					<text class="cell-text">版本</text>
				</view>
				<view class="cell-right">V1.1</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout" style="width: 80%">
			<button type="warn" @click="logout">退出登录</button>
		</view>
		<uni-popup :show="pwdDialog" ref="popup">
			<div class="popup_content">
				<div class="common-dialog">
					<!-- 输入框 -->
					<view class="input-item">
						<view class="title">当前密码</view>
						<view style="display: flex; width: 100%" class="input">
							<input
								placeholder="请输入当前密码"
								placeholder-style="font-size:26rpx;color:#ACACAC;"
								type="password"
								name="input"
								v-model="form.password"
								@blur="validatePassword" />
						</view>
						<span v-if="passwordError" class="error">
							{{ passwordError }}
						</span>
					</view>
					<view class="input-item">
						<view class="title">新的密码</view>
						<view style="display: flex; width: 100%" class="input">
							<input
								placeholder="请输入新的密码"
								placeholder-style="font-size:26rpx;color:#ACACAC;"
								type="password"
								name="input"
								v-model="form.newPassword"
								@blur="validateNewPassword" />
						</view>
						<span v-if="newPasswordError" class="error">
							{{ newPasswordError }}
						</span>
					</view>
					<view class="input-item">
						<view class="title">确认密码</view>
						<view style="display: flex; width: 100%" class="input">
							<input
								placeholder="请确认新的密码"
								placeholder-style="font-size:26rpx;color:#ACACAC;"
								type="password"
								name="input"
								v-model="form.confirmPassword"
								@blur="validateConfirmPassword" />
						</view>
						<span v-if="confirmPasswordError" class="error">
							{{ confirmPasswordError }}
						</span>
					</view>
					<view
						class="btngroup"
						style="display: flex; margin: 20px 0">
						<button
							class="button"
							size="mini"
							@click="closePopup()">
							取消
						</button>
						<button
							class="button editbtn"
							size="mini"
							type="primary"
							@click="doChangePwd()">
							修改
						</button>
					</view>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import { editPwd } from "../../api/index.js";
import { required, minLength } from "vuelidate/lib/validators";
import qs from "qs";
export default {
	data() {
		return {
			userInfo: {},
			pwdDialog: false,
			form: {
				password: "",
				newPassword: "",
				confirmPassword: "",
			},
			passwordError: "",
			newPasswordError: "",
			confirmPasswordError: "",
			validations: {
				loginParams: {
					password: {
						required,
						minLength: minLength(6),
					},
					newPassword: {
						required,
						minLength: minLength(6),
					},
					confirmPassword: {
						required,
						minLength: minLength(6),
					},
				},
			},
		};
	},
	mounted() {
		const storedObj = JSON.parse(uni.getStorageSync("userInfo"));
		console.log(storedObj);
		this.userInfo = storedObj;
		uni.setNavigationBarTitle({
			title: "个人中心",
		});
	},
	methods: {
		// 验证旧密码
		validatePassword() {
			if (!this.form.password) {
				this.passwordError = "原密码不能为空";
			} else if (this.form.password.length < 6) {
				this.passwordError = "密码不能少于6位";
			} else {
				this.passwordError = "";
			}
		},
		validateNewPassword() {
			if (!this.form.newPassword) {
				this.newPasswordError = "新的密码为空";
			} else if (this.form.password.length < 6) {
				this.newPasswordError = "新的密码不能少于6位";
			} else {
				this.newPasswordError = "";
			}
		},
		validateConfirmPassword() {
			if (!this.form.confirmPassword) {
				this.confirmPasswordError = "确认密码不能为空";
			} else if (this.form.confirmPassword.length < 6) {
				this.passwordError = "确认密码不能少于6位";
			} else {
				if (this.form.confirmPassword != this.form.newPassword) {
					this.confirmPasswordError = "两次输入密码不一致";
				} else {
					this.confirmPasswordError = "";
				}
			}
		},

		doChangePwd() {
			this.validatePassword();
			this.validateNewPassword();
			this.validateConfirmPassword();
			if (
				this.passwordError ||
				this.passwordNewError ||
				this.confirmPasswordError
			) {
				return false;
			} else {
				let that = this;
				let obj = {
					old_password: that.form.password,
					password: that.form.newPassword,
					repassword: that.form.confirmPassword,
				};
				const token = uni.getStorageSync("token");
				uni.request({
					header: {
						"content-type":
							"application/x-www-form-urlencoded; charset=UTF-8",
						Authorization: `bearer ${token}`,
					},
					url: "https://api.dayufeng.cn/edit_my_password?login_type=1",
					method: "POST", //请求方式POST\GET
					data: obj,
					success: function (res) {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: "success",
								duration: 2000,
							});
							that.removeStore();
							uni.redirectTo({
								url: "/pages/login/login",
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2000,
							});
							return false;
						}
					},
				});
			}
			// editPwd(JSON.stringify(obj)).then(res => {
			// 	console.log(res)
			// 	this.closePopup()
			// }).catch(err => {
			// 	this.closePopup()
			// })
		},
		changePsd() {
			this.$refs.popup.open();
		},
		closePopup() {
			this.form = {
				password: "",
				newPassword: "",
				confirmPassword: "",
			};
			this.$refs.popup.close();
		},
		logout() {
			let that = this;
			uni.showModal({
				title: "提示",
				content: "确认退出登陆？",
				success: function (res) {
					if (res.confirm) {
						that.removeStore();
						uni.redirectTo({
							url: "/pages/login/login",
						});
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		removeStore() {
			// 需要移除的键数组
			const keysToRemove = [
				"expirationTime",
				"token",
				"Bearer",
				"userInfo",
			];

			// 移除每个键
			keysToRemove.forEach((key) => {
				console.log(key);
				uni.removeStorage({
					key: key,
					success: function () {
						console.log(`${key} was removed successfully.`);
					},
					fail: function () {
						console.log(`Failed to remove ${key}.`);
					},
				});
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.index {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: white;
	/* border-top: 1px solid #cccccc; */
	padding: 0 30upx;
	box-sizing: border-box;
	margin-top: 20upx;
}

.popup_content {
	width: 80%;
	height: auto;
	padding: 20px;

	.common-dialog {
		width: 300px;
		border-radius: 12px;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 20px 0px 0px 0px;
		/* 将底部内边距设置为0 */
		display: flex;
		flex-direction: column;

		.input-item-groud {
			margin: 20px 0;
		}

		.error {
			color: #f34d37;
			font-size: 12px;
		}

		.input-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30upx;
			position: relative;
			border-radius: 4px;

			input {
				height: 44px;
				list-style: 44px;
				width: 100%;
				border-radius: 4px;
				font-size: 14px;
				font-weight: 300;
				background-color: white !important;
				/* 设置背景颜色为白色或其他颜色 */
				outline: none;
			}
		}
	}
}

.input-item {
	margin-bottom: 10px;
}

.logout {
	position: fixed;
	bottom: 140upx;
}

.vbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: linear-gradient(to right, #3078ea, #0052a3);
}

.top_back_img {
	z-index: -1;
	position: absolute;
	top: 0upx;
	width: 100%;
	height: 420upx;
}

.top {
	display: flex;
	width: 100%;
	height: 420upx;
	align-items: center;
}

.circle {
	margin-left: 100upx;
	width: 120upx;
	height: 120upx;
	border: 10upx solid #a4f4f6;
	border-radius: 150upx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.head {
	width: 120upx;
	height: 120upx;
	border-radius: 150upx;
}

.top-texts {
	display: flex;
	flex-direction: column;
	margin-left: 15upx;
	color: white;
}

.name {
	font-size: 36upx;
	font-weight: 500;
}

.set-top-hr {
	width: 210upx;
	height: 6upx;
}

.top-changeInfo {
	margin-top: 250upx;
	width: 120upx;
	height: 28upx;
	line-height: 28upx;
	background-color: #ffffff;
	border-radius: 15upx;
	padding: 10upx;
	color: #33dce8;
}

.middle {
	display: flex;
	align-items: center;
	position: relative;
	top: -50upx;
	width: 80%;
	height: 100upx;
	background-color: white;
	border-radius: 15upx;
}

.middle-line {
	width: 2upx;
	height: 80upx;
	background-color: #eeeeee;
}

.middle-left {
	flex-grow: 1;
	color: #666666;
	display: flex;
	align-items: center;
	text-align: center;
}

.middle-right {
	flex-grow: 1;
	color: #666666;
	display: flex;
	align-items: center;
	text-align: center;
}

.middle-icon {
	width: 40upx;
	height: 40upx;
	margin-left: 20upx;
}

.middle-num {
	color: #fcac45;
	-webkit-font-smoothing: antialiased;
}

.cell {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ccc;
	height: 90upx;
	align-items: center;
	justify-content: space-between;
}

.cell-left {
	display: flex;
	align-items: center;
	margin-left: 65upx;
}

.cell-text {
	margin-left: 25upx;
}

.cell-right {
	margin-right: 45upx;
	height: 28upx;
}

.cell_icon {
	width: 40upx;
	height: 40upx;
	height: 40upx;
}

.right-arrow {
	color: #aaa;
	width: 15upx;
	height: 28upx;
}

.btngroup {
	display: flex;
	justify-content: center;

	.button {
		margin: 0;
	}

	.editbtn {
		margin-left: 10px;
	}
}
</style>
